<template>
  <view>

    <scroll-view scroll-x class="tabs nav" scroll-with-animation :scroll-left="scrollLeft">
      <view class="cu-item tab" :class="item.value == type?'classify-active cur':''"
            v-for="(item,index) in tabs" :key="index" @click="handleTabClick(item)">
        {{ item.title }}
      </view>
    </scroll-view>

    <view class="list">
      <view class="item" v-for="(item,i) in list" :key="i" @click="handleItemClick(item)">
        <view class="text">预约号：{{ item.id }}</view>
        <view class="text">预约时间：{{ item.appointmentTime || "线下支付" }}</view>
        <view class="text" v-if="item.realname">顾客姓名：{{ item.realname }}</view>
        <view class="text" v-if="item.phone">顾客电话：{{ item.phone }}</view>
        <view class="text">预约项目：{{ item.goodsName }}</view>
        <view class="text">订单状态：{{ statusMapping[item.status] }}</view>
        <view class="text">服务金额：￥{{ item.totalMoney }}</view>
        <view class="text" v-if="item.status >= 4">支付金额：￥{{ item.payMoney }}</view>
        <view class="text" v-if="item.status >= 4">支付时间：{{ item.payTime }}</view>

        <view class="action">
          <view class="btn" v-if="item.status == 1" @click.stop="cancelOrder(item)">取消服务</view>
          <view class="btn" v-if="item.status == 2" @click.stop="stopOrder(item)">结束服务</view>
        </view>
      </view>


      <list-loading v-if="loading"/>
      <list-empty v-if="!loading && (!list || list.length == 0)"/>
      <list-load-over v-else-if=" loadOver"/>

    </view>

    <!--<view class="float-button">-->
    <!--  <text class="cuIcon-scan"></text>-->
    <!--</view>-->


    <my-dialog content="你确定要取消订单吗？" ref="cancel" show-cancel/>
    <my-dialog content="你确定要结束服务吗？" ref="stop" show-cancel/>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";
import MyDialog from "@/components/dialog";

export default {
  components: {MyDialog, ListLoadOver, ListEmpty, ListLoading},
  name: "technician-order",
  data() {
    return {
      scrollLeft: 0,
      type: 4,
      tabs: [
        {title: "全部", value: 4},
        {title: "已预约", value: 1},
        {title: "进行中", value: 2},
        {title: "已完成", value: 3},
        {title: "已取消", value: 0}
      ],
      list: [],
      page: 0,
      loading: false,
      loadOver: false,
      statusMapping: ["已取消", "已预约", "进行中", "已完成", "已支付", "已评价",],
    }
  },
  computed: {},
  methods: {
    refresh() {
      this.clear();
      this.getList();
    },
    handleTabClick(model, index) {
      this.type = model.value;
      this.scrollLeft = this.core.rpx2px(124) * (index - 1)
      this.clear();
      this.getList();
    },
    handleItemClick(item) {
      uni.navigateTo({url: `/pages/index/my/technician/order/info/index?type=1&id=${item.id}`})
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getTechnicianOrderList(this.type, ++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },
    _onPullDownRefresh() {
      this.clear();
      this.getList();
    },
    stopOrder(item) {
      this.$refs.stop.show().then(_ => {
        Api.finishService(item.id).then(res => {
          this.$toast("服务已结束。")
          this.refresh();
        })
      })
    },
    cancelOrder(item) {
      this.$refs.cancel.show().then(_ => {
        Api.cancelService(item.id).then(res => {
          this.$toast("订单取消成功。")
          this.refresh();
        })
      })
    },
    _onReachBottom() {
      this.getList();
    },
  },
  mounted() {
    this.getList()
  },
}
</script>

<style scoped lang='scss'>

.tabs {
  background-color: white;
  //display: flex;
  //justify-content: space-between;

  .tab {
    width: r(124px);
    //padding: r(30px);
    //border-bottom: r(3px) solid transparent;
    text-align: center;

    &.active {
      color: #C38C3A;
      border-color: #C38C3A;
    }
  }
}

.list {
  padding: r(30px 0);

  .item {
    background: #FFFFFF;
    box-shadow: r(0 2px 5px 0) rgba(59, 59, 59, 0.09);
    border-radius: r(10px);
    margin: r(24px 24px 0 24px);
    overflow: hidden;
    padding: r(54px 24px);
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      right: 0;

      height: r(20px);
      background: #BF8F3A;
    }

    .text {
      font-size: r(24px);
      color: #333333;

      & + .text {
        margin-top: r(24px);
      }
    }

    .action {
      display: flex;
      justify-content: flex-end;

      .btn {
        background-color: $primary-color;
        color: white;
        font-size: r(22px);
        padding: r(11px 22px);
        border-radius: r(50px);
      }
    }
  }

}

.float-button {
  height: r(75px);
  width: r(75px);
  border-radius: 50%;
  background-color: $primary-color;
  justify-content: center;
  align-items: center;
  display: flex;
  color: white;
  position: fixed;
  bottom: calc(#{r(94px)} + env(safe-area-inset-bottom) + #{r(150px)});
  right: r(50px);
  //box-shadow: r(0 0 15px 5px) rgba(59, 59, 59, 0.1);
  box-shadow: r(2px 2px 19px 2px) rgba(191, 143, 58, 0.55);

}

</style>